<template>
  <div class="menu-view">
    <div class="menu-container">
      <h1 class="game-title">宣坨坨</h1>
      <p class="game-subtitle">山西吕梁柳林地区传统扑克游戏</p>
      
      <div class="menu-content">
        <div class="star-coins">
          <span class="icon">💰</span>
          <span class="amount">{{ starCoins }}</span>
          <span class="label">星光币</span>
        </div>
        
        <!-- 游戏模式选择 -->
        <div v-if="!showMultiplayerOptions" class="game-modes">
          <button class="btn btn-primary mode-btn" @click="startSinglePlayer">
            🤖 单机对战
          </button>
          <button class="btn btn-multiplayer mode-btn" @click="showMultiplayerOptions = true">
            👥 多人对战
          </button>
        </div>
        
        <!-- 多人对战选项 -->
        <div v-if="showMultiplayerOptions" class="multiplayer-options">
          <div class="multiplayer-header">
            <h3>多人对战</h3>
            <p>与真人玩家实时对战</p>
          </div>
          
          <div class="multiplayer-buttons">
            <button class="btn btn-create" @click="showCreateRoom = true">
              🏠 创建房间
            </button>
            <button class="btn btn-join" @click="showJoinRoom = true">
              🚪 加入房间
            </button>
            <button class="btn btn-list" @click="showRoomList = true">
              📋 房间列表
            </button>
          </div>
          
          <button class="btn btn-back" @click="backToModeSelect">
            ← 返回
          </button>
        </div>
        
        <div class="secondary-buttons">
          <button class="btn btn-secondary rules-btn" @click="showRules = true">
            游戏规则
          </button>
          
          <button class="btn btn-info intro-btn" @click="showIntro = true">
            游戏介绍
          </button>
        </div>
        
        <div class="rules-hint">
          <p>3人游戏，每人8张牌</p>
          <p>收牌数决定输赢</p>
          <p>输家支付星光币</p>
        </div>
      </div>
    </div>
    
    <div class="decoration">
      <span class="card-icon">🃏</span>
      <span class="card-icon">♠️</span>
      <span class="card-icon">♥️</span>
      <span class="card-icon">♣️</span>
      <span class="card-icon">♦️</span>
    </div>
    
    <GameRules :visible="showRules" @close="showRules = false" />
    
    <!-- 创建房间弹窗 -->
    <div v-if="showCreateRoom" class="modal-overlay" @click="closeCreateRoom">
      <div class="modal-content" @click.stop>
        <h3>创建房间</h3>
        <div class="form-group">
          <label>房间名称</label>
          <input 
            v-model="newRoom.name" 
            type="text" 
            placeholder="请输入房间名称" 
            maxlength="20"
          />
        </div>
        <div class="form-group">
          <label>你的昵称</label>
          <input 
            v-model="newRoom.playerName" 
            type="text" 
            placeholder="请输入你的昵称" 
            maxlength="12"
          />
        </div>
        <div class="modal-buttons">
          <button class="btn btn-create" @click="createRoom" :disabled="creating">
            {{ creating ? '创建中...' : '创建房间' }}
          </button>
          <button class="btn btn-cancel" @click="closeCreateRoom">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 加入房间弹窗 -->
    <div v-if="showJoinRoom" class="modal-overlay" @click="closeJoinRoom">
      <div class="modal-content" @click.stop>
        <h3>加入房间</h3>
        <div class="form-group">
          <label>房间ID</label>
          <input 
            v-model="joinRoom.roomId" 
            type="text" 
            placeholder="请输入6位房间号" 
            maxlength="6"
            pattern="[0-9]*"
            inputmode="numeric"
            @input="filterNumericInput"
          />
        </div>
        <div class="form-group">
          <label>你的昵称</label>
          <input 
            v-model="joinRoom.playerName" 
            type="text" 
            placeholder="请输入你的昵称" 
            maxlength="12"
          />
        </div>
        <div class="modal-buttons">
          <button class="btn btn-join" @click="joinRoomAction" :disabled="joining">
            {{ joining ? '加入中...' : '加入房间' }}
          </button>
          <button class="btn btn-cancel" @click="closeJoinRoom">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 房间列表弹窗 -->
    <div v-if="showRoomList" class="modal-overlay" @click="closeRoomList">
      <div class="modal-content room-list-modal" @click.stop>
        <h3>房间列表</h3>
        <div class="room-list-header">
          <input 
            v-model="playerNameForList" 
            type="text" 
            placeholder="请输入你的昵称" 
            maxlength="12"
            class="player-name-input"
          />
          <button class="btn btn-refresh" @click="loadRoomList" :disabled="loadingRooms">
            🔄 {{ loadingRooms ? '刷新中...' : '刷新' }}
          </button>
        </div>
        <div class="room-list" v-if="rooms.length > 0">
          <div 
            v-for="room in rooms" 
            :key="room.id" 
            class="room-item"
            @click="quickJoinRoom(room)"
            :class="{ 'room-full': room.playerCount >= room.maxPlayers }"
          >
            <div class="room-info">
              <div class="room-name">{{ room.name }}</div>
              <div class="room-id">ID: {{ room.id }}</div>
            </div>
            <div class="room-players">{{ room.playerCount }}/{{ room.maxPlayers }}</div>
          </div>
        </div>
        <div v-else-if="!loadingRooms" class="no-rooms">
          暂无可用房间
        </div>
        <div v-if="loadingRooms" class="loading-rooms">
          加载房间列表中...
        </div>
        <div class="modal-buttons">
          <button class="btn btn-cancel" @click="closeRoomList">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 游戏介绍模态框 -->
    <div v-if="showIntro" class="intro-modal" @click="showIntro = false">
      <div class="intro-content" @click.stop>
        <h2 class="intro-title">🃏 宣坨坨 - 柳林传统扑克游戏</h2>
        
        <div class="intro-body">
          <div class="intro-section">
            <h3>🏠 游戏背景</h3>
            <p>"宣坨坨"是流行于山西吕梁柳林地区的传统扑克牌游戏，深受当地人民喜爱。游戏使用特制的24张牌，融合了策略性、技巧性和运气成分，是当地人休闲娱乐的重要方式。</p>
          </div>
          
          <div class="intro-section">
            <h3>🎴 游戏牌型</h3>
            <div class="features-grid">
              <div class="feature-item">
                <div class="feature-icon">7️⃣</div>
                <div class="feature-text">
                  <strong>卒(7)</strong><br>
                  红卒(红桃7、方块7)、黑卒(黑桃7、梅花7)
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">8️⃣</div>
                <div class="feature-text">
                  <strong>马(8)</strong><br>
                  红马(红桃8、方块8)、黑马(黑桃8、梅花8)
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">9️⃣</div>
                <div class="feature-text">
                  <strong>相(9)</strong><br>
                  红相(红桃9、方块9)、黑相(黑桃9、梅花9)
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">🔟</div>
                <div class="feature-text">
                  <strong>尔(10)</strong><br>
                  红尔(红桃10、方块10)最大，黑尔(黑桃10、梅花10)次之
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">🃏</div>
                <div class="feature-text">
                  <strong>曲曲(JQK)</strong><br>
                  红曲曲(红桃JQK)、黑曲曲(黑桃JQK)
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">🤴</div>
                <div class="feature-text">
                  <strong>王</strong><br>
                  大王和小王可组成特殊对子
                </div>
              </div>
            </div>
          </div>
          
          <div class="intro-section">
            <h3>🎯 游戏特色</h3>
            <div class="features-grid">
              <div class="feature-item">
                <div class="feature-icon">👥</div>
                <div class="feature-text">
                  <strong>3人对战</strong><br>
                  与2个AI智能玩家进行激烈对战
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">🂰</div>
                <div class="feature-text">
                  <strong>星光币系统</strong><br>
                  初始100个星光币，赢家获得奖励
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">🏆</div>
                <div class="feature-text">
                  <strong>策略性玩法</strong><br>
                  需要计算牌型、记忆出牌
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">📋</div>
                <div class="feature-text">
                  <strong>完整记录</strong><br>
                  实时显示出牌记录和统计
                </div>
              </div>
            </div>
          </div>
          
          <div class="intro-section">
            <h3>🎲 游戏玩法</h3>
            <div class="gameplay-steps">
              <div class="step">
                <span class="step-number">1</span>
                <span class="step-text">每人发手8张牌，由第一个玩家先出牌</span>
              </div>
              <div class="step">
                <span class="step-number">2</span>
                <span class="step-text">可出单牌、对子(相同数字相同颜色)或同色曲曲</span>
              </div>
              <div class="step">
                <span class="step-number">3</span>
                <span class="step-text">后续玩家必须跟相同数量的牌或扣牌(不出)</span>
              </div>
              <div class="step">
                <span class="step-number">4</span>
                <span class="step-text">每轮赢家收取所有牌（出牌数×3张）</span>
              </div>
            </div>
          </div>
          
          <div class="intro-section">
            <h3>🏅 胜负判定</h3>
            <div class="result-grid">
              <div class="result-item lose">
                <div class="result-icon">😢</div>
                <div class="result-text">
                  <strong><9张：不够</strong><br>
                  输掉星光币
                </div>
              </div>
              <div class="result-item win">
                <div class="result-icon">😄</div>
                <div class="result-text">
                  <strong>9张：刚够</strong><br>
                  赢得1个星光币
                </div>
              </div>
              <div class="result-item win">
                <div class="result-icon">😁</div>
                <div class="result-text">
                  <strong>15张：五了</strong><br>
                  赢得2个星光币
                </div>
              </div>
              <div class="result-item win">
                <div class="result-icon">🤩</div>
                <div class="result-text">
                  <strong>18张：此了</strong><br>
                  赢得3个星光币
                </div>
              </div>
            </div>
          </div>
          
          <div class="intro-footer">
            <p>🎆 快来体验这款充满智慧与乐趣的传统游戏吧！</p>
          </div>
        </div>
        
        <button class="close-btn" @click="showIntro = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useGameStore } from '../store/game';
import { useMultiplayerStore } from '../store/multiplayer';
import GameRules from '../components/GameRules.vue';
import { audioManager } from '../utils/AudioManager.js';

const gameStore = useGameStore();
const multiplayerStore = useMultiplayerStore();

const starCoins = ref(100);
const showRules = ref(false);
const showIntro = ref(false);

// 多人对战相关状态
const showMultiplayerOptions = ref(false);
const showCreateRoom = ref(false);
const showJoinRoom = ref(false);
const showRoomList = ref(false);

// 创建房间表单
const newRoom = ref({
  name: '',
  playerName: ''
});
const creating = ref(false);

// 加入房间表单
const joinRoom = ref({
  roomId: '',
  playerName: ''
});
const joining = ref(false);

// 房间列表
const rooms = ref([]);
const loadingRooms = ref(false);
const playerNameForList = ref('');

onMounted(() => {
  // 加载保存的星光币
  const saved = localStorage.getItem('starCoins');
  if (saved) {
    starCoins.value = parseInt(saved) || 100;
  }
  
  // 加载保存的玩家名称
  const savedPlayerName = localStorage.getItem('playerName');
  if (savedPlayerName) {
    newRoom.value.playerName = savedPlayerName;
    joinRoom.value.playerName = savedPlayerName;
    playerNameForList.value = savedPlayerName;
  }
});

// 单机游戏
const startSinglePlayer = async () => {
  // 立即设置加载状态，确保用户看到加载动画而不是蓝色背景
  gameStore.gameStatus = 'loading';
  
  // 立即播放洗牌音效
  try {
    audioManager.playShuffleSound();
  } catch (error) {
    console.warn('洗牌音效播放失败:', error);
  }
  
  // 初始化音频系统（如果还未初始化）
  if (!audioManager.backgroundMusic) {
    try {
      await audioManager.init();
    } catch (error) {
      console.warn('音频初始化失败:', error);
    }
  }
  
  // 短暂延迟确保UI更新
  await new Promise(resolve => setTimeout(resolve, 50));
  
  // 开始游戏初始化
  await gameStore.initGame();
  if (gameStore.currentPlayer) {
    gameStore.currentPlayer.starCoins = starCoins.value;
  }
};

// 返回模式选择
const backToModeSelect = () => {
  showMultiplayerOptions.value = false;
  showCreateRoom.value = false;
  showJoinRoom.value = false;
  showRoomList.value = false;
};

// 创建房间
const createRoom = async () => {
  if (!newRoom.value.name.trim()) {
    alert('请输入房间名称');
    return;
  }
  
  if (!newRoom.value.playerName.trim()) {
    alert('请输入你的昵称');
    return;
  }
  
  creating.value = true;
  
  try {
    // 保存玩家名称
    localStorage.setItem('playerName', newRoom.value.playerName);
    
    // 连接多人游戏服务器
    await multiplayerStore.connect();
    
    // 创建房间
    const result = await multiplayerStore.createRoom(
      newRoom.value.name, 
      newRoom.value.playerName
    );
    
    if (result.success) {
      console.log('房间创建成功:', result.data);
      // 房间创建成功，自动进入房间等待界面
      showCreateRoom.value = false;
      // 界面会通过App.vue的计算属性自动切换到lobby
    } else {
      alert(result.message || '创建房间失败');
    }
  } catch (error) {
    console.error('创建房间失败:', error);
    alert('连接服务器失败，请检查网络连接');
  }
  
  creating.value = false;
};

// 关闭创建房间弹窗
const closeCreateRoom = () => {
  showCreateRoom.value = false;
  newRoom.value = { name: '', playerName: newRoom.value.playerName };
};

// 过滤非数字输入
const filterNumericInput = (event) => {
  const value = event.target.value;
  const numericValue = value.replace(/[^0-9]/g, '');
  if (value !== numericValue) {
    joinRoom.value.roomId = numericValue;
  }
};

// 加入房间
const joinRoomAction = async () => {
  if (!joinRoom.value.roomId.trim()) {
    alert('请输入房间号');
    return;
  }
  
  if (joinRoom.value.roomId.length !== 6) {
    alert('房间号必须是6位数字');
    return;
  }
  
  if (!/^\d{6}$/.test(joinRoom.value.roomId)) {
    alert('房间号只能包含数字');
    return;
  }
  
  if (!joinRoom.value.playerName.trim()) {
    alert('请输入你的昵称');
    return;
  }
  
  joining.value = true;
  
  try {
    // 保存玩家名称
    localStorage.setItem('playerName', joinRoom.value.playerName);
    
    // 连接多人游戏服务器
    await multiplayerStore.connect();
    
    // 加入房间
    const result = await multiplayerStore.joinRoom(
      joinRoom.value.roomId, 
      joinRoom.value.playerName
    );
    
    if (result.success) {
      console.log('加入房间成功:', result.data);
      // 加入房间成功，自动进入房间等待界面
      showJoinRoom.value = false;
      // 界面会通过App.vue的计算属性自动切换到lobby
    } else {
      alert(result.message || '加入房间失败');
    }
  } catch (error) {
    console.error('加入房间失败:', error);
    alert('连接服务器失败，请检查网络连接');
  }
  
  joining.value = false;
};

// 关闭加入房间弹窗
const closeJoinRoom = () => {
  showJoinRoom.value = false;
  joinRoom.value = { roomId: '', playerName: joinRoom.value.playerName };
};

// 加载房间列表
const loadRoomList = async () => {
  if (!playerNameForList.value.trim()) {
    alert('请先输入你的昵称');
    return;
  }
  
  loadingRooms.value = true;
  
  try {
    // 连接多人游戏服务器
    if (!multiplayerStore.connected) {
      await multiplayerStore.connect();
    }
    
    // 获取房间列表
    const result = await multiplayerStore.getRoomList();
    
    if (result.success) {
      rooms.value = result.data;
    } else {
      console.error('获取房间列表失败:', result.message);
      rooms.value = [];
    }
  } catch (error) {
    console.error('获取房间列表失败:', error);
    rooms.value = [];
  }
  
  loadingRooms.value = false;
};

// 快速加入房间
const quickJoinRoom = async (room) => {
  if (room.playerCount >= room.maxPlayers) {
    alert('房间已满');
    return;
  }
  
  if (!playerNameForList.value.trim()) {
    alert('请先输入你的昵称');
    return;
  }
  
  joining.value = true;
  
  try {
    // 保存玩家名称
    localStorage.setItem('playerName', playerNameForList.value);
    
    // 加入房间
    const result = await multiplayerStore.joinRoom(
      room.id, 
      playerNameForList.value
    );
    
    if (result.success) {
      console.log('快速加入房间成功:', result.data);
      // 加入房间成功，自动进入房间等待界面
      showRoomList.value = false;
      // 界面会通过App.vue的计算属性自动切换到lobby
    } else {
      alert(result.message || '加入房间失败');
    }
  } catch (error) {
    console.error('快速加入房间失败:', error);
    alert('加入房间失败，请重试');
  }
  
  joining.value = false;
};

// 关闭房间列表弹窗
const closeRoomList = () => {
  showRoomList.value = false;
  rooms.value = [];
};
</script>

<style scoped>
.menu-view {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  overflow: hidden;
}

.menu-view::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

.menu-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 50px;
  text-align: center;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  max-width: 450px;
  width: 90%;
  position: relative;
  overflow: hidden;
}

.menu-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

.game-title {
  font-size: 52px;
  background: linear-gradient(45deg, #ffd700, #ff6b6b, #4ecdc4, #45b7d1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
  animation: titleGradient 4s ease-in-out infinite, titleFloat 3s ease-in-out infinite;
  font-weight: bold;
  letter-spacing: 2px;
}

.game-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 35px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  letter-spacing: 1px;
}

.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.star-coins {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.3));
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 15px 25px;
  border-radius: 25px;
  font-size: 18px;
  color: white;
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
  animation: coinGlow 2s ease-in-out infinite alternate;
}

.star-coins .icon {
  font-size: 24px;
}

.star-coins .amount {
  font-weight: bold;
  font-size: 24px;
}


/* 游戏模式选择 */
.game-modes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 30px 0;
}

.mode-btn {
  font-size: 20px;
  padding: 16px 40px;
  border: none;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.mode-btn.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.mode-btn.btn-multiplayer {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
}

/* 多人对战选项 */
.multiplayer-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
}

.multiplayer-header {
  text-align: center;
  margin-bottom: 10px;
}

.multiplayer-header h3 {
  font-size: 24px;
  color: white;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.multiplayer-header p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 14px;
}

.multiplayer-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 300px;
}

.btn-create {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  box-shadow: 0 6px 15px rgba(68, 160, 141, 0.4);
}

.btn-join {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

.btn-list {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 6px 15px rgba(245, 87, 108, 0.4);
}

.btn-back {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 10px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(10px);
}

.modal-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  max-width: 400px;
  width: 90%;
  color: white;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.modal-content h3 {
  text-align: center;
  margin: 0 0 25px 0;
  font-size: 22px;
  background: linear-gradient(45deg, #ffd700, #ff6b6b);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 16px;
  box-sizing: border-box;
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

.modal-buttons {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.modal-buttons .btn {
  flex: 1;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 10px;
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 房间列表特殊样式 */
.room-list-modal {
  max-width: 500px;
}

.room-list-header {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
}

.player-name-input {
  flex: 1;
}

.btn-refresh {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.room-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.room-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.room-item:hover:not(.room-full) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.room-item.room-full {
  opacity: 0.6;
  cursor: not-allowed;
}

.room-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.room-name {
  font-weight: bold;
  font-size: 16px;
}

.room-id {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.room-players {
  font-weight: bold;
  color: #4ecdc4;
}

.no-rooms, .loading-rooms {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.7);
}

.start-btn {
  font-size: 22px;
  padding: 18px 50px;
  margin-top: 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
}

.start-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.start-btn:hover::before {
  left: 100%;
}

.start-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6);
}

.rules-btn {
  font-size: 16px;
  padding: 12px 30px;
  margin-top: 15px;
}

.intro-btn {
  font-size: 16px;
  padding: 12px 30px;
  margin-top: 10px;
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important;
  border: none !important;
  color: white !important;
  border-radius: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(68, 160, 141, 0.3);
}

.intro-btn:hover {
  background: linear-gradient(135deg, #5fddcc 0%, #55b09d 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(68, 160, 141, 0.4);
}

.rules-hint {
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.rules-hint p {
  margin: 5px 0;
}

.decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.card-icon {
  position: absolute;
  font-size: 80px;
  opacity: 0.15;
  animation: cardFloat 12s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.card-icon:nth-child(1) {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.card-icon:nth-child(2) {
  top: 20%;
  right: 15%;
  animation-delay: 2s;
}

.card-icon:nth-child(3) {
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.card-icon:nth-child(4) {
  bottom: 30%;
  right: 10%;
  animation-delay: 6s;
}

.card-icon:nth-child(5) {
  top: 50%;
  left: 5%;
  animation-delay: 8s;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes titleGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes titleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

@keyframes coinGlow {
  0% { box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2); }
  100% { box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4); }
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-30px) rotate(5deg) scale(1.1);
  }
  50% {
    transform: translateY(-20px) rotate(-2deg) scale(0.9);
  }
  75% {
    transform: translateY(30px) rotate(-5deg) scale(1.05);
  }
}

/* 游戏介绍模态框 */
.intro-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.intro-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 40px;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffffff;
  position: relative;
}

.intro-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%);
  pointer-events: none;
  border-radius: 25px;
}

.intro-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 35px;
  background: linear-gradient(45deg, #ffd700, #ff6b6b, #4ecdc4);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGradient 3s ease-in-out infinite;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.intro-section {
  margin-bottom: 35px;
  position: relative;
}

.intro-section h3 {
  font-size: 22px;
  margin-bottom: 18px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  font-weight: bold;
}

.intro-section p {
  line-height: 1.8;
  margin-bottom: 18px;
  color: #e8e8e8;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.feature-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.feature-text {
  font-size: 15px;
  line-height: 1.5;
  color: #f0f0f0;
}

.feature-text strong {
  color: #ffd700;
}

.gameplay-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.step:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(5px);
}

.step-text {
  font-size: 15px;
  line-height: 1.5;
  color: #f0f0f0;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.result-item {
  padding: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.result-item.win {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #c8e6c9;
}

.result-item.lose {
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.4);
  color: #ffcdd2;
}

.result-text {
  font-size: 13px;
  line-height: 1.4;
}

.result-text strong {
  color: #ffffff;
}

.intro-footer {
  text-align: center;
  margin: 20px 0;
  font-size: 16px;
  font-style: italic;
  opacity: 0.9;
}

/* 横屏适配 - 全屏幕布局设计 */
@media (orientation: landscape) and (max-height: 600px) {
  .menu-view {
    padding: 10px;
  }
  
  .menu-container {
    padding: 20px 30px;
    max-width: none;
    width: 95vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  
  /* 星光币移到右上角 */
  .star-coins {
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 8px 16px;
    font-size: 13px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.15);
    animation: none;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.1);
  }
  
  .star-coins .icon {
    font-size: 16px;
  }
  
  .star-coins .amount {
    font-size: 16px;
    font-weight: normal;
  }
  
  .star-coins .label {
    font-size: 11px;
    opacity: 0.7;
  }
  
  /* 确保竖屏时隐藏次要按钮容器 */
  .secondary-buttons {
    display: contents; /* 让子元素正常显示 */
  }
  
  
  /* 标题区域居中 */
  .game-title {
    font-size: 42px;
    margin-bottom: 5px;
    text-align: center;
  }
  
  .game-subtitle {
    font-size: 15px;
    margin-bottom: 0;
    text-align: center;
  }
  
  /* 主内容区域 - 采用上下布局 */
  .menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
  }
  
  /* 开始游戏按钮 - 主按钮超大且单独一行 */
  .start-btn {
    font-size: 28px;
    padding: 40px 80px;
    margin: 0 0 10px 0; /* 减小底部间距 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    transform: scale(1);
    transition: all 0.3s ease;
  }
  
  .start-btn:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 20px 45px rgba(102, 126, 234, 0.6);
  }
  
  /* 次要按钮容器 */
  .secondary-buttons {
    display: flex;
    gap: 30px;
    margin-bottom: 15px; /* 减小底部间距 */
  }
  
  /* 规则和介绍按钮 - 次要按钮样式 */
  .rules-btn, .intro-btn {
    font-size: 14px;
    padding: 12px 28px;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  
  .rules-btn:hover, .intro-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
  
  /* 规则提示改为横向排列，使用图标 */
  .rules-hint {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
    align-items: center;
  }
  
  .rules-hint p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* 为规则提示添加图标 */
  .rules-hint p:nth-child(1)::before {
    content: "👥";
    font-size: 18px;
  }
  
  .rules-hint p:nth-child(2)::before {
    content: "🎯";
    font-size: 18px;
  }
  
  .rules-hint p:nth-child(3)::before {
    content: "💰";
    font-size: 18px;
  }
  
  /* 调整装饰卡片位置，避免遮挡 */
  .card-icon {
    font-size: 60px;
    opacity: 0.1;
  }
  
  .card-icon:nth-child(1) {
    top: 5%;
    left: 5%;
  }
  
  .card-icon:nth-child(2) {
    top: 10%;
    right: 5%;
  }
  
  .card-icon:nth-child(3) {
    bottom: 10%;
    left: 10%;
  }
  
  .card-icon:nth-child(4) {
    bottom: 15%;
    right: 5%;
  }
  
  .card-icon:nth-child(5) {
    top: 50%;
    left: 2%;
  }
  
  /* 横屏时的游戏介绍模态框适配 */
  .intro-modal {
    padding: 10px;
  }
  
  .intro-content {
    max-width: 92vw;
    max-height: 95vh;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
  }
  
  /* 标题栏固定样式 */
  .intro-title {
    font-size: 24px;
    margin: 0;
    padding: 15px 25px;
    text-align: center;
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 50%, rgba(15, 52, 96, 0.98) 100%);
    backdrop-filter: blur(10px);
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* 内容区域网格布局 */
  .intro-body {
    padding: 20px 25px;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-content: start;
  }
  
  /* 自定义滚动条样式 */
  .intro-body::-webkit-scrollbar {
    width: 6px;
  }
  
  .intro-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
  }
  
  .intro-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
  
  .intro-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  
  .intro-section {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.2s ease;
  }
  
  .intro-section:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  /* 布局调整 - 不同section占据不同列数 */
  .intro-section:nth-child(1) { grid-column: span 2; } /* 游戏背景 */
  .intro-section:nth-child(2) { grid-column: span 2; } /* 游戏牌型 */
  .intro-section:nth-child(3) { grid-column: span 2; } /* 游戏特色 */
  .intro-section:nth-child(4) { grid-column: span 1; } /* 游戏玩法 */
  .intro-section:nth-child(5) { grid-column: span 1; } /* 胜负判定 */
  
  .intro-footer {
    grid-column: span 2;
    margin: 0;
    padding: 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
  }
  
  .intro-section h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .intro-section p {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.6;
  }
  
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .feature-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
  }
  
  .feature-text {
    font-size: 13px;
  }
  
  .gameplay-steps {
    gap: 10px;
  }
  
  .step {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
  }
  
  .step-text {
    font-size: 13px;
  }
  
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .result-item {
    padding: 12px;
  }
  
  .result-text {
    font-size: 12px;
  }
  
  .close-btn {
    margin: 15px 25px;
    padding: 12px 20px;
    font-size: 15px;
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
}

/* 针对高度特别小的横屏设备（如手机横屏） */
@media (orientation: landscape) and (max-height: 450px) {
  .menu-view {
    padding: 5px;
  }
  
  .menu-container {
    padding: 15px 25px;
    height: 95vh;
  }
  
  /* 星光币调整位置和大小 */
  .star-coins {
    top: 10px;
    right: 20px;
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .star-coins .icon {
    font-size: 14px;
  }
  
  .star-coins .amount {
    font-size: 14px;
  }
  
  .star-coins .label {
    display: none; /* 隐藏标签文字节省空间 */
  }
  
  
  .game-title {
    font-size: 32px;
    margin-bottom: 3px;
  }
  
  .game-subtitle {
    font-size: 12px;
    margin-bottom: 0;
  }
  
  /* 主内容区域调整 */
  .menu-content {
    padding: 10px 0;
    gap: 15px;
  }
  
  .start-btn {
    font-size: 18px;
    padding: 25px 40px;
    margin: 0 0 15px 0; /* 小屏幕上进一步减小间距 */
  }
  
  .secondary-buttons {
    gap: 20px;
    margin-bottom: 10px;
  }
  
  .rules-btn, .intro-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
  
  .rules-hint {
    font-size: 11px;
  }
  
  /* 装饰卡片更小 */
  .card-icon {
    font-size: 45px;
    opacity: 0.08;
  }
  
  /* 游戏介绍模态框 - 超小横屏优化 */
  .intro-modal {
    padding: 5px;
  }
  
  .intro-content {
    max-height: 98vh;
  }
  
  .intro-title {
    font-size: 20px;
    padding: 10px 20px;
  }
  
  .intro-body {
    padding: 12px 20px;
    gap: 12px;
    /* 三列布局以充分利用横向空间 */
    grid-template-columns: repeat(3, 1fr);
  }
  
  .intro-section {
    padding: 10px;
  }
  
  /* 调整布局以适应三列 */
  .intro-section:nth-child(1) { grid-column: span 3; } /* 游戏背景 - 跨3列 */
  .intro-section:nth-child(2) { grid-column: span 3; } /* 游戏牌型 - 跨3列 */
  .intro-section:nth-child(3) { grid-column: span 3; } /* 游戏特色 - 跨3列 */
  .intro-section:nth-child(4) { grid-column: span 2; } /* 游戏玩法 - 跨2列 */
  .intro-section:nth-child(5) { grid-column: span 1; } /* 胜负判定 - 占1列 */
  
  .intro-footer {
    grid-column: span 3;
    padding: 10px;
    font-size: 13px;
  }
  
  .intro-section h3 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  
  .intro-section p {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.5;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  .feature-item {
    padding: 8px;
    gap: 8px;
  }
  
  .feature-icon {
    font-size: 20px;
    min-width: 25px;
  }
  
  .feature-text {
    font-size: 11px;
  }
  
  .feature-text strong {
    font-size: 11px;
  }
  
  .gameplay-steps {
    gap: 6px;
  }
  
  .step {
    padding: 8px;
    gap: 10px;
  }
  
  .step-number {
    width: 22px;
    height: 22px;
    font-size: 12px;
    min-width: 22px;
  }
  
  .step-text {
    font-size: 11px;
  }
  
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  .result-item {
    padding: 8px;
    gap: 6px;
  }
  
  .result-icon {
    font-size: 18px;
    min-width: 22px;
  }
  
  .result-text {
    font-size: 10px;
  }
  
  .close-btn {
    margin: 10px 20px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .intro-content {
    padding: 20px;
    margin: 10px;
  }
  
  .intro-title {
    font-size: 22px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .feature-item,
  .step,
  .result-item {
    padding: 10px;
  }
  
  .feature-text,
  .step-text,
  .result-text {
    font-size: 12px;
  }
}

.feature-icon {
  font-size: 28px;
  min-width: 35px;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.step-number {
  background: linear-gradient(135deg, #ffd700, #ffab00);
  color: #1a1a2e;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  min-width: 28px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.result-icon {
  font-size: 24px;
  min-width: 30px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

/* 游戏介绍关闭按钮样式 */
.intro-content .close-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(238, 90, 82, 0.3);
  position: relative;
  overflow: hidden;
}

.intro-content .close-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.intro-content .close-btn:hover::before {
  left: 100%;
}

.intro-content .close-btn:hover {
  background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 90, 82, 0.4);
}

.intro-content .close-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(238, 90, 82, 0.3);
}
</style>